<!-- 首页 -->
<template>
    <div class="I_main">
      <!-- 数据统计 -->
      <el-card class="sysnatic" :body-style="{ padding: '0px' }">
        <div class="sysnatic_c">
          <div class="s_item" v-for="(item,index) in dataList" :key="index">
            <div class="s_item_c">
              <div class="c_line"></div>
              <div class="s_item_text">
                <div class="s_line1"><span class="s_num">{{item.num}}</span>{{item.unit}}</div>
                <div class="s_line2">{{item.discribe}}</div>
              </div>
            </div>
            <el-tooltip class="item" effect="dark" :content="item.text" placement="left">
              <div class="tip1" slot="content">{{item.text}}</div>
              <img class="s_item_icon" :src="img.iconHelp" />
  
            </el-tooltip>
          </div>
  
        </div>
      </el-card>
      <!-- 内容部分 -->
      <div class="m_contain">
        <div class="realtime">
          <img class="m_title1" :src="img.title1" />
          <div class="m_cardBox">
            <el-card :body-style="{ padding: '0px' }">
              <div class="m_card_item m_scard_size tipbox">
                <!-- 标题 -->
                <div class="m_card_title">—— L1主业务流程 ——</div>
                <!-- 图文 -->
                <div class="m_card_itemCon" @click="gonNewPage(0,'实时稽核地图总览')">
                  <img class="m-realtime-img1" :src="img.zonglan" />
                  <div class="m-realtime-discr">
                    <span class="m-realtime-discr-s">实时稽核地图-</span>
                    <span class="m-realtime-discr-b">总览</span>
                  </div>
                </div>
                <el-tooltip class="item" effect="dark" placement="left-start">
                  <div class="tip1" slot="content">{{'构建一体业务主流程节点实时校验点地图，展示内存数据库嵌入业务过程中的实时稽核场景及拦截情况'}}</div>
                  <img class="tipIcon" :src="img.iconHelp" />
                </el-tooltip>
              </div>
            </el-card>
            <el-card :body-style="{ padding: '0px' }">
              <div class="m_card_item m_bcard_size tipbox">
                <!-- 标题 -->
                <div class="m_card_title">—— L2详细的业务流程 ——</div>
                <!-- 图文 -->
                <div class="both_box">
                  <div class="m_card_itemCon" @click="gonNewPage(0,'实时稽核地图营收')">
                    <img class="m-realtime-img1" :src="img.yingshou" />
                    <div class="m-realtime-discr">
                      <span class="m-realtime-discr-s">实时稽核地图-</span>
                      <span class="m-realtime-discr-b">营收</span>
                    </div>
                  </div>
                  <div class="m_card_itemCon" @click="gonNewPage(0,'实时稽核地图支付')">
                    <img class="m-realtime-img1" :src="img.zhifu" />
                    <div class="m-realtime-discr">
                      <span class="m-realtime-discr-s">实时稽核地图-</span>
                      <span class="m-realtime-discr-b">支付</span>
                    </div>
                  </div>
                </div>
                <el-tooltip class="item" effect="dark" placement="left-start">
                  <div class="tip2" slot="content">{{'根据主流程，细分营收线和支付线的实时校验地图，展示内存数据库嵌入营收线、支付线业务过程中的实时稽核场景及拦截情况'}}</div>
                  <img class="tipIcon" :src="img.iconHelp" />
                </el-tooltip>
  
              </div>
            </el-card>
            <el-card :body-style="{ padding: '0px' }">
              <div class="m_card_item m_scard_size tipbox">
                <!-- 标题 -->
                <div class="m_card_title">—— L3业务实体 ——</div>
                <!-- 图文 -->
                <div class="m_card_itemCon" @click="gonNewPage(0,'实时稽核地图站址')">
                  <img class="m-realtime-img1" :src="img.zhanshi" />
                  <div class="m-realtime-discr">
                    <span class="m-realtime-discr-s">实时稽核地图-</span>
                    <span class="m-realtime-discr-b">站址</span>
                  </div>
                </div>
                <el-tooltip class="item" effect="dark" placement="left-start">
                  <div class="tip1" slot="content">{{'以站址为核心，实时展示各省份站址状态、拆站信息、沉淀固化等相关业务信息'}}</div>
                  <img class="tipIcon" :src="img.iconHelp" />
                </el-tooltip>
              </div>
            </el-card>
          </div>
  
        </div>
        <div class="other">
          <img class="m_title2" :src="img.title2" />
          <div class="o_cardBox">
            <el-card v-for="(item,index) in otherList" :key="index" :body-style="{ padding: '0px' }">
              <div class="m_card_item o_card_size tipbox">
                <img class="other-img1" :src="item.img" />
                <span class="m-realtime-discr-s">{{item.discribe}}</span>
                <el-tooltip class="item" effect="dark" :content="item.text" placement="left-start">
                  <div class="tip3" slot="content">{{item.text}}</div>
                  <img class="tipIcon" :src="img.iconHelp" />
  
                </el-tooltip>
              </div>
            </el-card>
            <!-- <el-card :body-style="{ padding: '0px' }">
              <div class="m_card_item o_card_size">
                <img class="other-img1" :src="img.other2" />
                <span class="m-realtime-discr-s">实时校验服务查询门户</span>
              </div>
            </el-card>
            <el-card :body-style="{ padding: '0px' }">
              <div class="m_card_item o_card_size">
                <img class="other-img1" :src="img.other3" />
                <span class="m-realtime-discr-s">调用日志查询</span>
              </div>
            </el-card> -->
          </div>
        </div>
  
        <div class="result">
          <img class="m_title1" :src="img.title3" />
          <div class="r_cardBox">
            <div v-for="item in resultClass" :key="item" :class="'r_squreCard tipbox '+item">
              <img class="tipIcon" :src="img.iconHelp" />
              <div class="r_Scontain">
                <div class="r_Scontain_num">56,876<span style="font-size: 10px;">  元</span></div>
                <div class="r_Scontain_tip">近一个月拦截不应起租订单金额</div>
              </div>
            </div>
          </div>
          <div class="r_oBox">
            <el-card v-for="(item,index) in resultData" :key="index" class="r_oBox_card" :body-style="{ padding: '0px' }">
              <div class="r_oBox_cardcontain">
                <div class="r_ocard_discrib">{{item.name}}</div>
                <div class="r_ocard_num">{{item.num}}</div>
                <div class="r_ocard_toshift">{{item.toshift}}<img class="r_DorU" :src="img.up" /></div>
              </div>
            </el-card>
          </div>
          <div class="r_titleBox">
            <img class="r_titleImg" :src="img.r_t2" />
            <div class="r_title">月度排行榜</div>
          </div>
          <div class="mouth_cardbox">
            <el-card class="mouth_item" :body-style="{ padding: '0px' }">
              <div class="mouth_item_contain">
                <div class="mouth_item_top">
                  <div class="mouth_item_top_txt">
                    <div>月热门调用量-系统</div>
                    <div>TOP5</div>
                  </div>
                  <img class="tipIcon" :src="img.iconHelp" />
                </div>
              </div>
            </el-card>
          </div>
        </div>
  
      </div>
      <!-- 数据图表 -->
      <div style="width: 100%;height: 500px;" id="ec">
      </div>
    </div>
  </template>
  
  <script>
  
  
    export default {
      data() {
        return {
          loading: false,
          resizable: true,
          otherList: [
            { img: require('@/assets/img/other1.png'), discribe: '集中审核综合查询开放平台', text: '整合各业务系统中的各类审核信息，便于操作人员在进行集中操作变更时进行操作' },
            { img: require('@/assets/img/other2.png'), discribe: '集中审核综合查询开放平台', text: '将已实现场景内容进行集中展示，为业务人员、技术人员等提供查询和试用的界面' },
            { img: require('@/assets/img/other3.png'), discribe: '集中审核综合查询开放平台', text: '对场景的调用日志结果提供图形化的查询界面' },
          ],
          dataList: [
            { num: 58, unit: '个', discribe: '平台场景总数', text: '累计发布的实时稽核及查询、加速场景' },
            { num: 6, unit: '个', discribe: '已覆盖主要业务流程', text: '已覆盖营收、工程、资产、成本、支付、三集中业务流程' },
            { num: 2, unit: '个', discribe: '已覆盖详细流程 ', text: '已覆盖支付和营收两个详细流程' },
            { num: 1, unit: '个', discribe: '已覆盖消息实体', text: '已完成站址业务的覆盖' },
          ],
          resultClass:[
            'r_squreCard1','r_squreCard2','r_squreCard3','r_squreCard4'
          ],
          // 总量统计
          resultData:[
            {name:'近一个月调用量',num:'124,157,262',toshift:'+2,546 次'},
            {name:'近一个月校验量',num:'124,157',toshift:'-546 次'},
            {name:'近一个月校验率',num:'56%',toshift:'-30%'}
          ],
          img: {
            iconHelp: require('@/assets/img/ICO-help.png'),
            title1: require('@/assets/img/title-1.png'),
            title2: require('@/assets/img/title-2.png'),
            title3: require('@/assets/img/title-3.png'),
            zonglan: require('@/assets/img/zonglan.png'),
            yingshou: require('@/assets/img/yingshou.png'),
            zhifu: require('@/assets/img/zhifu.png'),
            zhanshi: require('@/assets/img/zhanshi.png'),
            other1: require('@/assets/img/other1.png'),
            other2: require('@/assets/img/other2.png'),
            other3: require('@/assets/img/other3.png'),
            down: require('@/assets/img/down.png'),
            up: require('@/assets/img/up.png'),
            r_t1:require('@/assets/img/r-t1.png'),
            r_t2:require('@/assets/img/r-t2.png'),
            r_t3:require('@/assets/img/r-t3.png'),
          },
          option: {
            tooltip: {},
            xAxis: {
              name: '月',
              data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15',
                '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30']
            },
            yAxis: {
              name: '数量'
            },
            series: [
              {
                type: 'bar',
                barWidth: '50%',
                realtimeSort: true,
                // 数据
                // data: [23, 24, 18, 25, 27, 28, 25],
                data: [23, 24, 18, 25, 27, 28, 25, 23, 24, 18, 25, 27, 28, 25, 23, 24, 18, 25, 27, 28, 25, 23, 24, 18, 25, 27, 28, 25, 23, 24,],
                // 柱形图样式
                itemStyle: {
                  normal: {
                    name: 'Y',
                    // 设置柱形图上方标签显示与否
                    label: {
                      show: true,
                      position: 'top',
                      valueAnimation: true
                    },
                    barBorderRadius: 5,
                    borderWidth: 1,
                    borderType: 'solid',
                    borderColor: '#D18A90',
                    color: '#D18A90',
                    shadowColor: '#D18A90',
                    shadowBlur: 3,
                  }
                }
              }
  
            ]
          }
        };
      },
  
      components: {},
  
      computed: {},
  
      mounted() {
        var chartDom = document.getElementById('ec');
        var myChart = this.$echarts.init(chartDom);
  
        this.option && myChart.setOption(this.option);
      },
  
      methods: {
        async gonNewPage(index, param) {
          const menuList = JSON.parse(sessionStorage.getItem('menuList'))
          // console.log('页面跳转',param,JSON.parse(menuList))
          console.log('pppppppppp', menuList)
          switch (index) {
            case 0:
              switch (param) {
  
                case '实时稽核地图营收':
                  const str = menuList[0].list[1].list[1].url.replace('/', '-')
                  this.$router.push({ name: str })
                  break
                case '实时稽核地图支付':
                  const str1 = menuList[0].list[1].list[0].url.replace('/', '-')
                  this.$router.push({ name: str1 })
                  break
                case '实时稽核地图总览':
                  // this.$router.push({ name: "home" })
                  const str2 = menuList[0].list[0].url.replace('/', '-')
                  this.$router.push({ name: str2 })
                  break
                case '实时稽核地图站址':
                  const str3 = menuList[0].list[2].url.replace('/', '-')
                  this.$router.push({ name: str3 })
                  break
              }
              break
            case 1:
              break
            default:
              this.$message('chucuole')
  
          }
        }
      }
    }
  
  </script>
  <style scoped>
    /* 有效区域 1080px */
    .I_main {
      display: flex;
      align-items: center;
      flex-direction: column;
    }
  
    .sysnatic {
      height: 135px;
      width: 100%;
      min-width: 1080px;
      display: flex;
      justify-content: center;
    }
  
    .sysnatic_c {
      align-items: center;
      height: 100%;
      width: 1080px;
      display: flex;
      flex-direction: row;
      align-items: center;
    }
  
    .s_item {
      width: 25%;
      height: 75px;
      position: relative;
    }
  
    .s_item_icon {
      position: absolute;
      top: -15px;
      right: 10px;
      width: 25px;
      height: 25px;
    }
  
    .s_item_c {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: row;
      align-items: center;
    }
  
    .c_line {
      width: 1px;
      height: 100%;
      background-color: #EBEBEB;
    }
  
    .s_item_text {
      display: flex;
      flex: 1;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      text-align: center;
    }
  
    .s_line1 {
      /* line-height: 36px; */
      display: flex;
      justify-content: center;
      align-items: center;
    }
  
    .s_line2 {
      margin-top: 17px;
      max-width: 120px;
      font-size: 13px;
      color: #333333;
      line-height: 20px;
    }
  
    .s_num {
      font-size: 36px;
      color: #C5382E;
    }
  
    .m_contain {
      width: 1080px;
      /* border: 1px solid red; */
    }
  
    .realtime {
      margin-top: 48px;
      display: flex;
      align-items: center;
      flex-direction: column;
    }
  
    .m_title1 {
      height: 48px;
      width: 390px;
    }
  
    .m_cardBox {
      width: 100%;
      display: flex;
      height: 210px;
      justify-content: space-between;
      margin-top: 28px;
    }
  
    .m_card_item {
      width: 100%;
      display: flex;
      align-items: center;
      flex-direction: column;
    }
  
    .m_scard_size {
      width: 255px;
    }
  
    .m_bcard_size {
      width: 510px;
    }
  
    .m_card_title {
      color: #333333;
      font-size: 13px;
      font-weight: bolder;
      margin-top: 30px;
    }
  
    .m_card_itemCon {
      margin-top: 24px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  
    .both_box {
      width: 100%;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-evenly;
    }
  
    .m-realtime-img1 {
      width: 66px;
      height: 66px;
    }
  
    .m-realtime-discr {
      margin-top: 18px;
      flex-direction: row;
      display: flex;
      align-items: center;
    }
  
    .m-realtime-discr-s {
      font-size: 9px;
      color: #333333;
    }
  
    .m-realtime-discr-b {
      font-size: 13px;
      font-weight: bold;
      color: #C5382E;
    }
  
    .other {
      margin-top: 45px;
      display: flex;
      align-items: center;
      flex-direction: column;
    }
  
    .o_cardBox {
      width: 100%;
      display: flex;
      height: 105px;
      justify-content: space-between;
      margin-top: 28px;
    }
  
    .o_card_size {
      width: 340px;
      height: 100%;
    }
  
    .other-img1 {
      width: 36px;
      height: 36px;
      margin-bottom: 12px;
      margin-top: 24px;
    }
  
    .m_title2 {
      height: 48px;
      width: 225px;
    }
  
    .tip1 {
      max-width: 150px;
      line-height: 20px;
    }
  
    .tip2 {
      max-width: 350px;
      line-height: 20px;
    }
  
    .tip3 {
      max-width: 220px;
      line-height: 20px;
    }
  
    .tipbox {
      position: relative;
    }
  
    .tipIcon {
      position: absolute;
      top: 5px;
      right: 5px;
      width: 25px;
      height: 25px;
    }
  
    .result{
      margin-top: 45px;
      display: flex;
      align-items: center;
      flex-direction: column;
    }
    .r_cardBox{
      margin-top: 52px;
      display: flex;
      height: 127px;
      width: 100%;
    }
    .r_squreCard{
      flex: 1;
      background-color: pink;
    }
    .r_squreCard1{
      background:repeating-linear-gradient(to left,#FE6255,#FDCA8E);
    }
    .r_squreCard2{
      background:repeating-linear-gradient(to left,#FFAD4D,#FFE4AC);
    }
    .r_squreCard3{
      background:repeating-linear-gradient(to left,#5DE3B0,#D1FCC4);
    }
    .r_squreCard4{
      background:repeating-linear-gradient(to left,#5BB5E0,#C3FCFB);
    }
    .r_Scontain{
      height: 100%;
      width: 100%;
      display: flex;
      justify-content: center;
      flex-direction: column;
      text-align: center;
      color: #FEFEFE;
    }
    .r_Scontain_num{
      font-size: 33px;
      font-weight: 700;
    }
    .r_Scontain_tip{
      margin-top: 12px;
      font-size: 10px;
    }
    .r_oBox{
      margin-top: 62px;
      height: 195px;
      width: 100%;
      display: flex;
      justify-content: space-around;
    }
    .r_oBox_card{
      width: 195px;
      height: 100%;
      border-radius: 50%;
    }
    .r_oBox_cardcontain{
      width: 100%;
      height: 195px;
      display: flex;
      flex-direction: column;
      text-align: center;
      justify-content: center;
    }
    .r_ocard_discrib{
      color: #999999;
      font-size: 14px;
    }
    .r_ocard_num{
      font-size: 25px;
      font-weight: 700;
      color: #FE6255;
      margin-top: 20px;
    }
    .r_ocard_toshift{
      font-size: 12px;
      color: #FE6255;
      margin-top: 12px;
    }
    .r_DorU{
      width: 12px;
      height: 12px;
      margin-top: -3px;
      margin-right: 6px;
    }
    .r_titleBox{
      width: 100%;
      display: flex;
      align-items: center;
    }
    .r_titleImg{
      width: 27px;
      height: 27px;
    }
    .r_title{
      font-size: 18px;
      font-weight: 700;
      margin-left: 3.8px;
    }
    .mouth_cardbox{
      width: 100%;
      margin-top: 36px;
    }
    .mouth_item{
      width: 337px;
      height: 466px;
    }
    .mouth_item_contain{
      width: 100%;
      height: 100%;
    }
    .mouth_item_top_txt{
      text-align: center;
      font-size: 19px;
      font-weight: 600;
      color: #FFFFFF;
    }
    .mouth_item_top{
      height: 80px;
      background-color: pink;
      display: flex;
      justify-content: center;
      position: relative;
    }
  </style>